<template>
    <div>
        <el-dialog :title="form.id ? '编辑角色' : '新增角色'" width="30%" :show-close="false" :visible.sync="dialogFormVisible"
            :close-on-click-modal="false" style="height: 100%;" custom-class="customclassdialog">
            <el-form :model="form">
                <el-form-item label="角色名称:" :label-width="formLabelWidth">
                    <screenSelect title="" type='input' v-model="form.name" :isValue='form.name' placeholder="请输入"
                        @transfer="valueHeld($event, 'name')" width='286px' position="top"
                        :isBorder="untenFun(form.name)" />
                    <div class="unten" v-if="untenFun(form.name)">请输入角色名称</div>
                </el-form-item>
                <!-- <el-form-item label="备注:" :label-width="formLabelWidth">
                    <screenSelect title="" type='textarea' v-model="form.remark" :isValue='form.remark'
                        placeholder="请输入" @transfer="valueHeld($event, 'remark')" width='286px' position="top" />
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
export default {
    name: 'WorkspaceJsonAddroleicon',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        dialogFormVisible: {
            type: Boolean
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            formLabelWidth: '100px',
            form: { name: '' },
            isUnten: false
        };
    },
    mounted() {
    },
    methods: {
        untenFun(data) {
            if (this.isUnten) {
                if (data == undefined) {
                    return true
                } else {
                    if (data == '' && data != '0') {
                        return true
                    } else {
                        return false
                    }
                }
            } else {
                return false
            }

        },
        valueHeld(childParam, fatherparam) {
            this.isUnten = false
            this.form[fatherparam] = childParam
        },
        cancel() {
            let e = {}
            e.dialogFormVisible = false
            e.form = this.form
            this.$emit('cancelHeld', e);
        },
        save() {
            this.isUnten = true
            let e = {}
            e.dialogFormVisible = false
            e.form = this.form
            for (let key in e.form) {
                console.log(key);
                if (key != 'des') {
                    if (e.form[key] === '' || e.form[key] === undefined) {
                        return false
                    }
                }

            }
            this.$emit('updata', e);
        },
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }</style>